<template>
  <div class="me_head">
    <!-- 头像设置 -->
    <avatarSettings @change="roleHandle" v-model:visible="visibleSetting" />
    <div>
      <div class="head_top">
        <div class="left_info">
          <div class="user_icon" @click="showSetAvatar">
            <img :src="avatarUrl" alt="" class="mr-10" />

            <!-- 审核状态 -->
            <div class="avatar_status" v-if="sta == 1">
              <span>{{ t("home_page_avatar_status1") }}</span>
            </div>
            <img src="/imgs/me/camera.svg" alt="" class="camera" />
          </div>
          <div class="user_info" @click="toLogin">
            <span>{{ isLocalLoggedIn ? info.full_name : t("role_name") }}
              <iconpark-icon v-if="isLocalLoggedIn" icon-id="copy1" size="0.9rem" class="dong1"
                @click="copyClick(info.full_name)"></iconpark-icon>
            </span>
            <span>
              {{ t("home_page_today_flowing") }}：{{
                isLocalLoggedIn ? signInfo?.cur_bet : 0.0
              }}
            </span>
          </div>
        </div>
        <div v-if="signInfo.is_open === 1" class="left_right" @click="signIn">
          {{ t("home_page_sign_in") }}
        </div>
      </div>
      <div class="balance_wrap">
        <div class="center">
          <div class="balance" @click="getNewMon">
            <iconpark-icon icon-id="dong1" size="1.2rem" class="dong1"></iconpark-icon>
            <span>
              {{ userMoney }}
            </span>
            <iconpark-icon icon-id="refresh" size="1.0rem" :class="refreshFlag && 'refresh_action'"
              class="refresh"></iconpark-icon>
          </div>

        </div>
        <div class="to_user" @click="router.push('/vip')">
          <span>{{ t("home_page_meber_center") }}</span>
          <iconpark-icon icon-id="arrow2" size="0.8rem" class="arrow2"></iconpark-icon>
        </div>
      </div>

      <div class="head_down">
        <div class="mt-5 level">
          <img :key="isLocalLoggedIn ? (VIPinfo.current_vip_level || 0) : 1" v-lazy="`/imgs/level/newicon/level${isLocalLoggedIn ? (VIPinfo.current_vip_level || 0) : 1
            }.webp`" alt="" class="vip" />
          <nut-progress :percentage="(VIPinfo.total_bet_money / target_bet_money) * 100 || 0" stroke-width="8"
            text-inside>
            <img v-lazy="'/imgs/me/pointDot.webp'" :key="'pointDot'" width="20" height="20" style="margin-left: -2px;" />
          </nut-progress>
          
          <img :key="isLocalLoggedIn ? (VIPinfo.current_vip_level || 0) + 1 : 1" v-lazy="`/imgs/level/newicon/level${isLocalLoggedIn ? (VIPinfo.current_vip_level || 0) + 1 : 1
            }.webp`" alt="" class="vip" />
        </div>
      </div>
    </div>
  </div>
  <Toast v-model:visible="showToast">{{ t(toast_value) }}</Toast>
</template>

<script setup lang="ts">
import { computed, ref, onMounted, watch, defineExpose } from "vue";
import { useI18n } from "vue-i18n";
import { User } from "@/store/user";

import pinia from "@/store/index";
import avatarSettings from "./avatarSettings.vue";
import { useRouter } from "vue-router";
import { NetPacket } from "@/netBase/NetPacket";
import { copyFn } from "@/utils/publicMethods";
import { showNotify } from "@nutui/nutui";
import { isLocalLoggedIn, settings, roleInfo, info, VIPinfo } from "@/utils/commonVar";
import PKwebsocket from "@/lolo/Ws";
import { joinURL } from '@/utils/publicMethods'

const { t } = useI18n();
// const lang=useI18n().locale;

const store = User(pinia);
const router = useRouter();
const toast_value = ref();
const showToast = ref(false);

const signInfo: any = ref({});

const visibleSetting = ref(false);

const target_bet_money: any = computed(() => {
  if (VIPinfo.value && VIPinfo.value?.vip_level_reward_config?.length > 0) {
    return VIPinfo.value?.vip_level_reward_config[VIPinfo.value?.current_vip_level || 0]
      ?.target_bet_money;
  } else {
    return 0;
  }
});

// 签到
const signIn = () => {
  router.push("/activity/signIn");
};
// 复制
const copyClick = (full_name: any) => {
  copyFn(full_name);
  showToast.value = true;
  toast_value.value = "copy_success";
};

// 用户余额
const userMoney = computed(() => {
  return Intl.NumberFormat().format(roleInfo.value.money);
});

// 刷新余额
const refreshFlag = ref(false);
const timerRe = ref();
const getNewMon = () => {
  refreshFlag.value = true;
  const req = NetPacket.req_roleinfo_with_id();
  req.id = roleInfo.value.id;
  PKwebsocket.instance.send(req, true, {
    callbackName: "msg_notify_roleinfo_with_id",
    callback: null,
  });
  timerRe.value = setTimeout(() => {
    refreshFlag.value = false;
  }, 1 * 1000);
};

const toLogin = async () => {
  if (!isLocalLoggedIn.value) {
    await store.setLogin(true);
  }
};

// 头像
const showSetAvatar = () => {
  if (!isLocalLoggedIn.value) {
    return;
  }
  visibleSetting.value = true;
};
const avatarUrl: any = computed(() => {
  if (!isLocalLoggedIn.value) return "/imgs/head_icons/default.webp";
  if (!roleInfo.value.head_photo) return `/imgs/head_icons/1002.webp`;
  if (roleInfo.value.head_photo.toString().includes(".")) {
    return  joinURL(settings.value.media_url, roleInfo.value.head_photo);
  } else {
    if (
      ![1000, 1001, 1002, 1003, 1004, 1005, 1006, 2001, 2002, 2003, 2004, 2005, 2006].includes(
        Number(roleInfo.value.head_photo)
      )
    ) {
      return `/imgs/head_icons/1002.webp`;
    }
  }
  return `/imgs/head_icons/${roleInfo.value.head_photo || 1002}.webp`;
});

// 头像审核状态
const sta: any = ref(2);
const avatarStatusHandle = async (res: any) => {
  if (res.sta == 3 && roleInfo.value.head_photo.toString().includes(".")) {
    showNotify.danger(t("home_page_avatar_error2"));
    roleInfo.value.head_photo = 1002;
    const query = NetPacket.req_select_head_icon();
    query.new_head_icon = '1002';
    PKwebsocket.instance.send(query, true);
  }
  if (roleInfo.value.head_photo && roleInfo.value.head_photo.toString().includes(".")) {
    sta.value = res.sta;
  } else {
    sta.value = 2;
  }
};

// 用户信息
const roleHandle = () => {
  setTimeout(() => {
    const query = NetPacket.req_custom_head_icon_info();
    PKwebsocket.instance.send(query, true, {
      callbackName: "msg_notify_custom_head_icon_info",
      callback: avatarStatusHandle,
    });
  }, 1000);
};

// 签到相关数据
const notify_sign_result = (rs: any) => {
  signInfo.value = rs;
  sessionStorage.setItem("signInfo", JSON.stringify(rs));
};

const getSignInfo = () => {
  try {
    const signInfoStr = sessionStorage.getItem("signInfo");
    if (signInfoStr) {
      signInfo.value = JSON.parse(signInfoStr);
    }
  } catch (error) {}
  if (isLocalLoggedIn.value) {
    const req = NetPacket.req_sign_in_config();
    PKwebsocket.instance.send(req, true, {
      callbackName: "msg_notify_sign_in_list",
      callback: notify_sign_result,
    });
  }
};

onMounted(() => {
  setTimeout(() => {
    if (isLocalLoggedIn.value) {
      // 获取头像状态
      const query = NetPacket.req_custom_head_icon_info();
      PKwebsocket.instance.send(query, true, {
        callbackName: "msg_notify_custom_head_icon_info",
        callback: avatarStatusHandle,
      });
    }
  }, 1000);

  // 获取签到相关信息
  getSignInfo();
});

watch(() => info.value, (n: any, o: any) => {
  if (!o.full_name && n.full_name) {
    getSignInfo();
  }
})

defineExpose({
  getSignInfo,
  getNewMon,
});
</script>

<style lang="scss" scoped>
.me_head {
  // width: 100%;
  // position: fixed;
  // z-index: 10;
  //  background-color: #361e79;

  >div {
    background-color: #131232;
    box-shadow: 0.5px 0.5px 1px 0px #2e296b inset;
    padding: 14px;
    height: 168px;
    border-radius: 12px 12px 0px 0px;

    margin: 10px 14px;
  }

  .head_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    width: 100%;

    .left_info {
      flex: 1;
      display: flex;
      align-items: center;

      .user_icon {
        position: relative;
        margin-right: 12px;

        .avatar_status {
          background-color: rgba(0, 0, 0, 0.5);
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          color: #fff;
          border-radius: 50%;

          span {
            position: absolute;
            width: 100%;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            font-size: 12px;
            text-align: center;
          }
        }

        img {
          height: 44px;
          width: 44px;
          border: 2px solid #aeacff;
          border-radius: 50%;
        }
        .camera{
          position: absolute;
          right: 0px;
          bottom: 0;
          width: 16px;
          height: 16px;
        }
      }

      .user_info {
        width: 100%;
        display: flex;
        gap: 6px;
        flex-direction: column;

        span {
          &:nth-child(1) {
            width: 140px;
            display: inline-block;
            color: #ffffff;
            font-size: 14px;
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          &:nth-child(2) {
            color: #c6c4f5;
            font-size: 12px;
            line-height: 12px;
            // border-image-source: linear-gradient(127.35deg, #B477BE -0.03%, #DFBAEC 25.79%, #8970B3 100.09%);

            img {
              height: 18px;
            }
          }
        }
      }
    }

    .left_right {
      height: 28px;
      line-height: 28px;
      padding: 0px 14px;
      text-align: center;
      color: #ffffff;
      font-weight: 500;
      border-radius: 14px;
      background: linear-gradient(180deg, #5567ff 0%, #9e1eff 100%);
      box-shadow: 0.5px 0.5px 1px 0px #9b9eff inset;

      img {
        height: 120px;
      }
    }
  }

  .center {
    display: flex;
    align-items: center;
  }

  .balance_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .balance {
      // margin-left: -28px;
      background-color: #2e296b;
      border-radius: 14px;
      color: #ffffff;
      height: 28px;
      font-weight: 600;
      // padding: 6px 34px;
      padding: 0 6px;
      display: flex;
      align-items: center;

      // line-height: 28px;
      // display: flex;
      // align-content: center;
      span {
        margin: 0 4px;
      }
    }

    .to_user {
      color: #5b6cff;
      font-size: 12px;
      display: flex;
      align-items: center;

      .arrow2 {
        margin-top: 3px;
      }
    }

    .refresh {
      // margin-left: -28px;
    }

    .refresh_action {
      animation: refresh 1s linear infinite;
    }

    @keyframes refresh {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    .dong1 {
      z-index: 100;
    }
  }

  .head_down {
    margin-top: 14px;

    .level {
      display: flex;
      gap: 7.5px;
      align-items: center;

      .vip {
        width: 64px;
        height: 24px;
      }
    }

    .vip_progress {
      display: flex;
      justify-content: space-between;
    }

    .role {
      display: flex;
      justify-content: space-between;

      .level_role {
        color: #ffffff;
        font-size: 12px;
        border-bottom: 1px solid #ffffff;
      }

      .need_add {
        span {
          &:nth-child(1) {
            color: #f1c232;
            font-size: 12px;
          }

          &:nth-child(2) {
            color: #ffffff;
            font-size: 12px;
          }
        }
      }
    }

    .vip_now {
      display: flex;
      align-items: center;
      color: #ffffff;
      font-size: 12px;

      img {
        height: 13px;
        margin-left: 3px;
      }
    }
  }
}

:deep(.nut-progress) {
  margin-top: 5px;
}

:deep(.nut-progress .nut-progress-outer) {
  background: #000;
}

:deep(.nut-progress-slot) {
  // left: 8% !important;
  top: 54.5% !important;
}

:deep(.nut-progress .nut-progress-outer .nut-progress-inner) {
  height: 8px;
  margin-top: 1px;
  margin-left: 2px;
  background: linear-gradient(180deg, #5567ff 0%, #9e1eff 100%);
}
</style>
